<template>
	<div class="middle_chinaDataShowBox">
		<div class="middle_chinaeverydayData" ref="chinaevetydaychart"></div>
	</div>
</template>

<script>
	import "echarts/map/js/china.js"
	import jsonp from 'jsonp'
	export default {
		data() {
			return {
				chinaDataDayOption: {},
				echarts: require('echarts'), //获取echarts
			}
		},
		methods: {
			geteverydayData() {
				this.$axios({
					method: 'get',
					url: 'http://ncovdata.market.alicloudapi.com/ncov/cityDiseaseInfoWithTrend',
					headers: {
						'Authorization': 'APPCODE ' + '3967d3ad740543048d6b6f69110946ac'
					}
				}).then(response => {
					// console.log(response);
					let option = {
						title: {
							subtext: '全国疫情趋势',
							// left: 'center'
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								animation: false
							}
						},
						legend: {
							data: ['确诊量', '治愈量'],
							// left: 10
						},
						toolbox: {},
						axisPointer: {
							link: {
								xAxisIndex: 'all'
							}
						},
						dataZoom: [{
								show: true,
								realtime: true,
								start: 30,
								end: 70,
								xAxisIndex: [0, 1]
							},
							{
								type: 'inside',
								realtime: true,
								start: 30,
								end: 70,
								xAxisIndex: [0, 1]
							}
						],
						grid: [{
							left: 50,
							right: 50,
							height: '35%'
						}, {
							left: 50,
							right: 50,
							top: '55%',
							height: '35%'
						}],
						xAxis: [{
								type: 'category',
								boundaryGap: false,
								axisLine: {
									onZero: true
								},
								data: []
							},
							{
								gridIndex: 1,
								type: 'category',
								boundaryGap: false,
								axisLine: {
									onZero: true
								},
								data: [],
								position: 'top'
							}
						],
						yAxis: [{
								name: '人',
								type: 'value',
								max: 150000
							},
							{
								gridIndex: 1,
								name: '人',
								type: 'value',
								inverse: true,
								max: 150000
							}
						],
						series: [{
								name: '确诊量',
								type: 'line',
								symbolSize: 8,
								hoverAnimation: false,
								data: []
							},
							{
								name: '治愈量',
								type: 'line',
								xAxisIndex: 1,
								yAxisIndex: 1,
								symbolSize: 8,
								hoverAnimation: false,
								data: []
							}
						]
					}
					for (var i = 0; i < response.data.trend.length; i++) {
						option.xAxis[0].data.push(response.data.trend[i].day)
						option.xAxis[1].data.push(response.data.trend[i].day)
						option.series[0].data.push(response.data.trend[i].sure_cnt)
						option.series[1].data.push(response.data.trend[i].cure_cnt)
					}
					this.chinaDataDayOption = option
					let daychart = this.echarts.init(this.$refs.chinaevetydaychart)
					daychart.setOption(this.chinaDataDayOption)
				}).catch(error => {
					console.log(error);
				})
			}
		},
		mounted() {
			this.geteverydayData()
			let daychart = this.echarts.init(this.$refs.chinaevetydaychart)
			daychart.setOption(this.chinaDataDayOption)
			window.onresize = () => {
				setTimeout(() => {
					daychart.resize()
				}, 10)
			}
		}
	}
</script>

<style>
	.middle_chinaeverydayData {
		padding: 10px;
		height: calc(60vh - 50px);
		text-align: center;
		border: 1px #F0F0F0 solid;
		background-color: white;
	}
</style>
